<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script src="html5plus://ready"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
			});
		</script>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vant.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<van-tabbar v-model="active" @change="tabChange()">
				<van-tabbar-item icon="shop-o">首页</van-tabbar-item>
				<van-tabbar-item icon="apps-o">分类</van-tabbar-item>
				<van-tabbar-item icon="cart-o">购物车</van-tabbar-item>
				<van-tabbar-item icon="user-o">个人中心</van-tabbar-item>
			</van-tabbar>
		</div>
		<script>
			var app = new Vue({
				el: "#app",
				data: {
					active: 0,
					views: [{
							name: "shop",
							url: "views/shop.html"
						},
						{
							name: "apps",
							url: "views/apps.html"
						},
						{
							name: "cart",
							url: "views/cart.html"
						},
						{
							name: "user",
							url: "views/user.html"
						}
					],
				},
				created() {
					var _this = this;
					var self = plus.webview.currentWebview();
					for (var i = 0; i < _this.views.length; i++) {
						var tempwebview = plus.webview.create(_this.views[i].url, _this.views[i].name, {
							top: "0px",
							bottom: "50px",
							zindex: 1
						})
						self.append(tempwebview);
					}
					plus.webview.show(_this.views[_this.active].name);
				},
				methods: {
					
					tabChange: function() {
						console.log(this.active)
						plus.webview.show(this.views[this.active].name);
					}
				}
			})
		</script>
	</body>
</html>
